<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>修改资料</title>
  <link rel="stylesheet" href="./css/weui.css" />
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/common.css">
</head>
<style>
.genderi {
  margin-left: 15px;
}
i+span{
  display: inline-block;
  width:60px;
}
.weui-select{
  padding-left: 0;
}
</style>

<body>
  <div class="weui-cells ">
    <div class="weui-cell ">
      <div class="weui-cell__hd"><i class="fa icon-suitcase fa-fw"></i><span>用户名</span></div>
      <div class="weui-cell__bd">
        <input type="text" class='weui-input' id='username' placeholder="用户名">
      </div>
      <div class="weui-cell__ft"></div>
    </div>
    <div class="weui-cell ">
      <div class="weui-cell__hd"><i class="fa icon-suitcase fa-fw"></i><span>电话</span></div>
      <div class="weui-cell__bd">
       <input class='weui-input' id='cellphone' type="text" placeholder="电话">
      </div>
      <div class="weui-cell__ft"></div>
    </div>
    <div class="weui-cell weui-cell_select">
      <div class="weui-cell__hd genderi"><i class="fa icon-suitcase fa-fw "></i><span>性别</span></div>
      <div class="weui-cell__bd">
        <select name="" id="gender" class='weui-select'>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div class="weui-cell__ft"></div>
    </div>
  </div>
  <button class='weui-btn weui-btn_primary ' id='modify'>确认修改</button>
</body>
<script src='js/jquery.js'></script>
<script>
$(function() {
  $.ajax({
    url: './testJson/user_weixinUpdate.json',
    success: function(data) {
      $("#username").val(data.username)
      $("#cellphone").val(data.cellphone)
      $("#gender").val(data.gender)
    }
  })

  $("#register").on("click", function() {
    var username = $("#username").val();
    var cellphone = $("#cellphone").val();
    var gender = $("#gender").val();

    if (username && cellphone && gender) {
      var data = {
        username: username,
        cellphone: cellphone,
        gender: gender
      }
      $.ajax({
        url: ' localhost:8080/JGX/user_weixinUpdate.json',
        data: data,
        success: function(success) {
          alert("修改成功")

        }

      })
    } else {
      alert("信息不完整")
    }

  })

})
</script>

</html>
